<template>
  <div class="topBox">
    <div class="L"><a href="index.html">YANG</a></div>
    <div class="C">
      <div class="saerchbox">
        <router-link to="/product/list">
          <input name="" type="text" placeholder="请输入您要搜索的内容" /><img src="/assets/images/ss.png" />
        </router-link>
      </div>
    </div>
    <div class="R" @click="show = true">
      <img src="/assets/images/tr.png" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in recommendlist" :key="item.id">
        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
          <img :src="item.thumb_text" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>
  <div class="lqgwBox">
    <ul>
      <li v-for="item in typelist" :key="item.id" @click="toPagelist(item.id)">
        <img :src="item.thumb_text" />
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in newlist" :key="item.id">
      <div class="con">
        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
          <img :src="item.thumb_text" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="adBox">
    <img src="/public/assets/images/11.png">
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>热销<span>•</span>单品</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in hostlist" :key="item.id">
      <div class="con">
        <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
          <img :src="item.thumb_text" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <div class="footerBox">
    <Footer />
  </div>
  <van-popup v-model:show="show" position="right" :style="{ width: '20%', height: '100%' }">
    <van-sidebar>
      <van-sidebar-item :title="item.name" v-for="item in typelist" :key="item.id" @click="toPagelist(item.id)" />
    </van-sidebar>
  </van-popup>
</template>

<script setup>

//推荐
const recommendlist = ref([]);
//分类
const typelist = ref([]);
//新品
const newlist = ref([]);
//热销
const hostlist = ref([]);
const show = ref(false);
const router = useRouter();
//第一步：获取数据 接口请求
onBeforeMount(() => {
  getHomeData();
});
const getHomeData = async () => {
  let result = await Api.productIndex();
  if (result.code == 1) {
    recommendlist.value = result.data.recommendlist;
    newlist.value = result.data.newlist;
    hostlist.value = result.data.hostlist;
  }

  let res = await Api.productType();
  if (result.code == 1) {
    typelist.value = res.data;
  }
};
const toPagelist = (id) => {
  router.push({
    path: "/product/list",
    query: {
      typeid: id,
    },
  });
};
</script>
